import { memo, useState } from "react";
import { CenterWapper } from "./style";
import { CSSTransition } from "react-transition-group";
import IconSearchBar from "@/assets/svg/icon-search-bar";
import SearchTabs from "../tabs";
import SearchSections from "../sections";
import SearchTitles from "@/assets/data/search_titles";

const HeaderCenter = memo((props) => {
  const { isSearch, searchBarClick } = props;

  const [tabIndex, setTabIndex] = useState(0);
  const titles = SearchTitles.map((item) => item.title);

  function searchBarClickHandle() {
    if (searchBarClick) searchBarClick();
  }

  return (
    <CenterWapper>
      <CSSTransition in={!isSearch} classNames="bar" timeout={250} unmountOnExit={true}>
        <div className="search-bar" onClick={searchBarClickHandle}>
          <div className="text">搜索房源和体验</div>
          <div className="icon">
            <IconSearchBar />
          </div>
        </div>
      </CSSTransition>
      <CSSTransition in={isSearch} classNames="detail" timeout={250} unmountOnExit={true}>
        <div className="search-detail">
          <SearchTabs titles={titles} tabClick={setTabIndex} />
          <div className="infos">
            <SearchSections searchInfos={SearchTitles[tabIndex].searchInfos} />
          </div>
        </div>
      </CSSTransition>
    </CenterWapper>
  );
});

export default HeaderCenter;
